<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>弹幕发射jq版</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
      html {
        box-sizing: border-box;
      }
      * {
        box-sizing: inherit;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      .container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      .danmu-box {
        position: relative;
        width: 100%;
        height: 400px;
        border: 1px solid black;
      }
      .danmu {
        display: inline-block;
        position: absolute;
        right: 0;
        transform: translateX(100%);
        padding: 5px 10px;
        font-size: 1rem;
        white-space: nowrap;
        border: 1px solid black;
        border-radius: 5px;
      }
      .danmu-action {
        animation-name: action;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
      }
      @keyframes action {
        from {
          transform: translateX(100%);
          margin-right: 0;
        }
        to {
          transform: translateX(-100%);
          margin-right: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>弹幕发射jquery版</h1>
      <div class="danmu-box"></div>
      <div class="danmu-control">
        <input id="danmuInput" type="text" />
        <button id="send">发射</button>
        <button id="show">隐藏</button>
      </div>
    </div>
    <script>
      $().ready(function() {
        var danmuColors = [
          '#ff0',
          '#f00',
          '#0ff',
          '#00f',
          '#ff4433',
          '#3344ff',
          '#558866',
          '#113377'
        ]
        var _ActionTime = 8000 // 单位毫秒
        var $box = $('.danmu-box')
        var $send = $('#send')
        var $show = $('#show')

        var showedDanmu = [] // 展示完成的弹幕

        // 随机取一种颜色
        function getRandColor() {
          var len = danmuColors.length
          return danmuColors[Math.floor(Math.random() * len)]
        }
        // 随机生成一个top值
        function getRandTop() {
          var height = $box.innerHeight()
          return Math.floor(Math.random() * (height - 60) + 30)
        }

        // 获取输入的文字并生成节点加入弹幕盒子
        function getValueAndAdd() {
          var value = $('#danmuInput').val()
          if (!value || value.trim() == '') {
            alert('弹幕不能为空')
            return
          }
          var obj = null
          var color = getRandColor()
          var top = getRandTop()
          if (showedDanmu.length > 0) {
            // 不用重新创建节点
            obj = showedDanmu.splice(0, 1)[0]
            obj.text(value)
            obj.removeClass('danmu-action')
            obj.css({
              color: color,
              top: top + 'px',
              borderColor: color,
              animationDuration: _ActionTime + 'ms'
            })
            setTimeout(function() {
              obj.addClass('danmu-action')
            }, 0)
          } else {
            obj = $(
              '<span class="danmu danmu-action" style="top:' +
                top +
                'px;color:' +
                color +
                ';border-color:' +
                color +
                ';animation-duration: ' +
                _ActionTime +
                'ms;">' +
                value +
                '</span>'
            )
            obj.appendTo($box)
          }
          // 运动完成加入showedDanmu
          setTimeout(function() {
            showedDanmu.push(obj)
          }, _ActionTime)
        }

        // 发射按钮绑定
        $send.click(getValueAndAdd)
        $show.click(function() {
          if ($box.css('visibility') == 'visible') {
            $box.css('visibility', 'hidden')
            $(this).text('显示')
          } else {
            $box.css('visibility', 'visible')
            $(this).text('隐藏')
          }
        })
      })
    </script>
  </body>
</html>
